<template>
  <div>
    <!-- 轮播图区域 -->
    <el-carousel height="580px">
      <el-carousel-item v-for="item in list" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>

    <!-- 按钮区域 -->
    <div class="bottom">
      <el-button @click="drawer = true" type="primary" style="margin-left: 16px;" icon="el-icon-s-comment">查看简介</el-button>
      <el-button @click="showAddresDialog" type="warning" style="margin-left: 16px;" icon="el-icon-s-promotion">项目地址</el-button>
      <el-button @click="logout" type="danger" style="margin-left: 16px;" icon="el-icon-setting">退出登录</el-button>

      <!-- 查看简介右侧边栏 -->
      <el-drawer title="vue_shop" :visible.sync="drawer" direction="rtl">
        <div class="touxiang">
          <img src="../assets/logo.png" alt="">
          <span>yhh</span>
        </div>
        <div class="text_container">
          <p>该电商后台管理系统基于 Vue2 + Cli3 + Element-Ui 等技术实现</p>
          <p>系统主要涵盖了五大模块，分别是：用户管理、商品管理、订单管理、数据统计</p>
          <div class="date-box">
            北京时间：{{date}}
          </div>
        </div>
      </el-drawer>

      <!-- 地址的对话框-->
      <el-dialog title="gitee 地址" :visible.sync="addresDialogVisible" width="50%">
        <i class="el-icon-link" style="color: #409eff;"></i>
        <a href="https://gitee.com/you-huanghe/xxxtsj.git" style="color: black"> https://gitee.com/you-huanghe/xxxtsj.git </a>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addresDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addresDialogVisible = true">
            <a href="https://www.baidu.com">前往</a>
          </el-button>
        </span>
    </el-dialog>

    </div>
  </div>

</template>

<script>
import { messageTip } from '@/api/messageTipAPI.js'
export default {
  name: 'Welcome',
  data () {
    return {
      drawer: false,
      direction: 'rtl',
      list: ['商品交易管理系统', 'Vue', 'springboot', 'Element-Ui'],
      date: '', // 实时显示的时间
      addresDialogVisible: false // 控制地址对话框的显示和隐藏
    }
  },
  methods: {
    tip () {
      const h = this.$createElement
      this.$notify({
        title: 'Welcome!',
        message: h('i', { style: 'color: teal' }, 'vue_shop: — 该管理系统基于 Vue2 + Cli3 + Element-Ui 等技术实现'),
        offset: 100,
        duration: 6000
      })
    },
    // 退出登录
    async logout () {
      const confirmResult = await this.$confirm('此操作将退出该系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error)
      if (confirmResult !== 'confirm') return messageTip('info', '已取消退出')
      // 退出成功的操作
      sessionStorage.clear()
      this.$router.push('/login')
      messageTip('success', '退出成功！')
      this.$notify({
        title: '退出成功',
        message: '您已退出后台管理系统!',
        type: 'success',
        offset: 100,
        duration: 2000
        // position: 'top-left'
      })
    },
    // 展示地址对话框的业务
    showAddresDialog () {
      this.addresDialogVisible = true
    }
  },
  mounted () {
    this.timer = setInterval(() => {
      this.date = new Date().toLocaleString()
    }, 1000)
  }

}
</script>

<style lang="less" scoped>
.bottom {
  margin-top: 20px;
  .touxiang{
    display: flex;
    margin: 10px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    img{
      width: 100%;
      border-radius: 50%;
    }
    span{
      height: 10px;
      padding-left: 20px;
    }
  }

}
.text_container{
  margin: 20px;
  line-height: 30px;
  p {
    text-indent: 2em;
  }
  .date-box{
    position: absolute;
    bottom: 20px;
    color: red;
  }
}
.el-dialog a{
  text-decoration: none;
  color: #fff;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 55px;
  opacity: 0.75;
  line-height: 600px;
  text-align: center;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
</style>
